<%-- 
    Document   : emp_report_stat
    Created on : Jan 2, 2014, 3:03:13 AM
    Author     : user
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<!DOCTYPE html>
<script src="js/highcharts.js"></script>
<script src="js/modules/exporting.js"></script>

<style type="text/css">
            table.gridtable {
                font-family: verdana,arial,sans-serif;
                font-size:11px;
                color:#333333;
                border-width: 1px;
                border-color: #666666;
                border-collapse: collapse;
            }
            table.gridtable th {
                border-width: 1px;
                padding: 8px;
                border-style: solid;
                border-color: #666666;
                background-color: #dedede;
            }
            table.gridtable td {
                border-width: 1px;
                padding: 8px;
                border-style: solid;
                border-color: #666666;
                background-color: #ffffff;
            }
        </style>
  <s:form id="form-search-empdept" action="reportGraduation" method="post" theme="simple">

                                                                     <s:select 
                                                                            
                                                                            list="listDepartment" 
                                                                            name="filter" 
                                                                            listKey="departmentID"
                                                                            listValue="departmentName"
                                                                            headerKey="-1"
                                                                            headerValue="--เลือก--">
                                                                        </s:select>
                                                                     <s:submit value="ตกลง"></s:submit>
     </s:form>    
        <s:if test="%{report.size() == 0}" >
            <div style="width: 100%;margin:auto;text-align: center;"><s:property value="reportName"></s:property></div>  
        </s:if> 
<s:if test="%{report.size() > 0}" >
    <script type="text/javascript">
        $(function () {
    $('#chart-sex').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: '<s:property value="reportName"></s:property>'
        },
        tooltip: {
    	    pointFormat: '{series.name}: <b>{point.y} คน</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'จำนวน',
            data: [
                <s:iterator value="report" status="stat">
                ['<s:property value="field1"></s:property>',
                <s:property value="field2"></s:property>],
                 </s:iterator>
                
            ]
        }]
    });
});

    </script>
    <div id="chart-sex" style="min-width: 310px; height: 400px; margin: 0 auto">
        
    </div>
    <table class="gridtable" style="margin:auto;">
                  <tr>
                    <th>ระดับการศึกษา</th><th>จำนวน</th>
                 </tr>
                  <s:iterator value="report" status="stat">
                      <tr>
                  <td>   <s:property value="field1"></s:property></td>
                    <td><s:property value="field2"></s:property></td>
                      </tr>
                 </s:iterator>
                 
              
               
            </table>
   
    
</s:if>
